<template>
  <body id="login-page">
  <el-form class="login-container" label-position="left" label-width="0px">
    <h3 class="login_title">用户登录</h3>
    <el-form-item>
      <el-input
        type="text"
        v-model="loginForm.loginName"
        auto-complete="off"
        placeholder="用户名"
      ></el-input>
    </el-form-item>
    <el-form-item>

      <el-input
        type="password"
        v-model="loginForm.password"
        auto-complete="off"
        placeholder="密码"
      ></el-input>
    </el-form-item>
    <el-form-item style="width: 100%">
      <el-button
        type="primary"
        style="width: 40%;  border: none"
        @click="userlogin"
      >登录
      </el-button
      >
      <el-button
        type="primary"
        style="width: 40%;  border: none ;background-color: rgb(191, 231, 11)"
        @click="merchantRegister"
      >注册
      </el-button
      >
    </el-form-item>

  </el-form>

  </body>
</template>

<script>
  import {login} from "@/api/user";
  export default {
    name: "UserLogin",
    data() {
      return {
        loginForm: {
          loginName: "",
          password: "",
        },
        responseResult: [],
      };
    },
    methods: {
      userlogin() {
        var _this = this;
        login({
          uname: this.loginForm.loginName,  //注意，前边的uname、upassword不能使用驼峰命名，否则无法接收参数
          upassword: this.loginForm.password
        }).then(result => {
            if (result.data.code === 200) {
              //收到后端返回的成功代码时，触发 store 中的 mutation ,存储token 和user
              let data=result.data.data;
              let token=data.token;
              let user=data.user;
              //存储token
              _this.$store.commit('SET_TOKENN', token);
              //存储user
              _this.$store.commit('SET_USER', user);
              /*console.log(_this.$store.state.token);
              console.log(this.$store.state.user.uid)*/ //从本地store中获取uid
              //如果状态码为200，代表账号密码正确，登录成功，进行路由跳转
              this.$router.replace({path: '/HomePage'})
            } else {
              this.$message.error('登录失败,请检查用户名或密码');
            }

          })
          .catch(failResponse => {
            alert("登录失败");
          })
      },
      merchantRegister() {
        this.$router.replace({path: '/UserRegister'})
      },

    },
  };
</script>

<style scoped>
  #login-page {
    background: url("../assets/img/bg.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }

  body {
    margin: 0px;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 100px auto;
    width: 280px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>
